<template>
  <div :class=" this.$store.state.content_search.contentData.length >0 ? 'layout-search-content-wrap search-card-wrap-top':'layout-search-content-wrap' ">
    <div v-for="item in this.$store.state.content_search.contentData">
      <div class="search-card-wrap">
        <MainCard :item="item"/>
      </div>
    </div>
    <div v-if="this.$store.state.content_search.contentLoading === '1'"
         @click="loadMore"  class="my-loading">
      加载更多
    </div>
    <div v-if="this.$store.state.content_search.contentLoading === '2'"
         class="my-loading">
      正在加载 ......
    </div>
    <div v-if="this.$store.state.content_search.contentLoading === '3'" class="no-more">
      没有更多了
    </div>
    <div v-if="this.$store.state.content_search.contentLoading === '4'" class="no-more">
    </div>
  </div>
</template>
<script>
  import MainCard from '~/components/card/main-card.vue'
  export default {
    data () {
      return {}
    },
    components: {
      MainCard
    },
    beforeCreate: function () {
    },
    mounted () {
    },
    methods: {
      loadMore () {
        this.$store.dispatch('content_search/getContentData', {
          keywords: this.$store.state.content_search.keywords, oper: 'more'
        })
      }
    }
  }
</script>
<style>


  .search-card-wrap {
    border-bottom: 1px solid #ececec;
    padding-top: 15px;
    padding-bottom: 10px;
  }
  .search-card-wrap-top{
    border-top: 1px solid #ececec;
  }


  .layout-search-content-wrap {
    background-color: #ffffff;
    margin-top: 30px;
  }

  @media all and (max-width: 766px) {
    .search-no-more {
      height: 150px;
    }
  }
</style>

